<template>
  <div class="chat-container">
    <!-- 器官列表按钮 -->
    <div class="organ-list">
      <button
        v-for="organ in organs"
        :key="organ.id"
        @click="selectOrgan(organ.id)"
        :class="{ 'active': selectedOrganId === organ.id }"
        class="organ-btn"
      >
        {{ organ.name }}
      </button>
    </div>

    <div class="body-section">
      <!-- 人体图 -->
      <div class="body-container">
        <svg width="240" height="500" viewBox="0 0 240 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- 人体轮廓 -->
          <path
            d="M120 40 L120 40
               C150 40 150 90 120 110
               C90 90 90 40 120 40 Z
               M105 105 L135 105 L140 120 L100 120 Z
               M100 120
               C80 180 80 280 80 330
               L160 330
               C160 280 160 180 140 120 Z
               M80 180 L60 280 M160 180 L180 280
               M90 330 L90 460 M150 330 L150 460"
            class="body-outline"
          />

          <!-- 大脑 -->
          <path
            d="M120 50
               C140 50 140 80 120 95
               C100 80 100 50 120 50"
            :class="['organ-part', { 'highlight': selectedOrganId === 1 }]"
            @click="selectOrgan(1)"
          />

          <!-- 肺部 -->
          <path
            d="M95 140
               C90 160 90 200 100 220
               L140 220
               C150 200 150 160 145 140
               C120 150 95 140 95 140"
            :class="['organ-part', { 'highlight': selectedOrganId === 2 }]"
            @click="selectOrgan(2)"
          />

          <!-- 心脏 -->
          <path
            d="M110 160
               C105 150 120 140 130 150
               C140 140 155 150 150 160
               C145 170 115 170 110 160"
            :class="['organ-part', { 'highlight': selectedOrganId === 3 }]"
            @click="selectOrgan(3)"
          />

          <!-- 胃 -->
          <path
            d="M110 230
               C140 230 140 260 130 270
               C120 280 100 280 95 270
               C90 260 90 230 110 230"
            :class="['organ-part', { 'highlight': selectedOrganId === 4 }]"
            @click="selectOrgan(4)"
          />

          <!-- 肾脏 -->
          <g
            :class="['organ-part', { 'highlight': selectedOrganId === 5 }]"
            @click="selectOrgan(5)"
          >
            <path d="M85 260 C75 270 75 290 85 300 C95 290 95 270 85 260" />
            <path d="M155 260 C145 270 145 290 155 300 C165 290 165 270 155 260" />
          </g>

          <!-- 膀胱 -->
          <path
            d="M110 310
               C130 310 140 330 130 340
               C120 350 100 350 90 340
               C80 330 90 310 110 310"
            :class="['organ-part', { 'highlight': selectedOrganId === 6 }]"
            @click="selectOrgan(6)"
          />
        </svg>
      </div>

      <!-- 选中提示 -->
      <div v-if="selectedOrganId" class="selected-tip">
        已选择：{{ getSelectedOrganName }}
      </div>

      <!-- 问诊按钮 -->
      <button
        class="consult-btn"
        @click="goToConsult"
        :disabled="!selectedOrganId"
      >
        去问诊
      </button>
    </div>
  </div>
</template>

<script>
//import {lookAtTheCorrespondingDiseaseByLocation} from "../../api/organSelect/organSelect";

export default {
  name: 'OrganSelect',
  data() {
    return {
      selectedOrganId: null,
      organs: [
        { id: 1, name: '大脑' },
        { id: 2, name: '肺部' },
        { id: 3, name: '心脏' },
        { id: 4, name: '胃' },
        { id: 5, name: '肾' },
        { id: 6, name: '膀胱' }
      ],
      aiAvatarUrl: 'https://api.dicebear.com/7.x/bottts/svg?seed=ai-assistant'
    }
  },
  computed: {
    getSelectedOrganName() {
      const organ = this.organs.find(o => o.id === this.selectedOrganId)
      return organ ? organ.name : ''
    },
    selectedOrganKey() {
      const organ = this.organs.find(o => o.id === this.selectedOrganId)
      return organ ? organ.key : ''
    }
  },
  methods: {
    selectOrgan(id) {
      this.selectedOrganId = id
    },
    goToConsult() {
      if (this.selectedOrganId) {
        // 清空本地存储的聊天记录
        localStorage.removeItem('chatMessages');
        this.$router.push({
          path: '/ai',
          query: {
            id: this.selectedOrganId,
            type: 'consult'
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-container {
  position: relative;
  display: flex;
  gap: 40px;
  padding: 20px;
}

.organ-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.organ-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: #e0e0e0;
  }

  &.active {
    background-color: #007bff;
    color: white;
  }
}

.body-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.body-container {
  position: relative;
  width: 240px;
  height: 500px;
  margin: 0 auto;

  svg {
    width: 100%;
    height: 100%;
  }
}

.body-outline {
  stroke: #666;
  stroke-width: 2;
  fill: #ffe0bd;
}

.organ-part {
  stroke: #999;
  stroke-width: 1.5;
  fill: #f8f8f8;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    fill: #f0f0f0;
  }

  &.highlight {
    stroke: #007bff;
    stroke-width: 3;
    animation: pulse 2s infinite;
  }
}

// 高亮状态下的颜色
.organ-part.highlight {
  &:nth-child(1) { fill: #ff8080; }  // 大脑
  &:nth-child(2) { fill: #ff9999; }  // 肺部
  &:nth-child(3) { fill: #ff4040; }  // 心脏
  &:nth-child(4) { fill: #ffaa77; }  // 胃
  &:nth-child(5) { fill: #ff5555; }  // 肾
  &:nth-child(6) { fill: #ffbb88; }  // 膀胱
}

.selected-tip {
  font-size: 14px;
  color: #666;
  margin-top: -10px;
}

.consult-btn {
  padding: 12px 40px;
  border: none;
  border-radius: 25px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: #0056b3;
  }

  &:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .chat-container {
    flex-direction: column;
  }

  .body-container {
    width: 100%;
    height: 400px;
  }
}

.chat-container {
  position: relative;
}

.ai-avatar {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@keyframes pulse {
  0% {
    filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 123, 255, 1));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8));
  }
}
</style>
